


 <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Android & javascript </title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
        <!-- link type="text/css"
        href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css"
        rel="stylesheet" /-->
        <script type="text/javascript" src="js/jquery-1.4.2.js">
        </script>
        <script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js">
        </script>
       
        <!--
        jCarousel library
        -->
        <script type="text/javascript" src="js/jquery.jcarousel.pack.js">
        </script>
        <!--
        jCarousel core stylesheet
        -->
        <link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
        <!--
        jCarousel skin stylesheet
        -->
        <link rel="stylesheet" type="text/css" href="css/jcarousel.skin.css" />
        <link rel="stylesheet" type="text/css" href="css/tangoskin.css" />
        <!--  script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
        -->
        <script type="text/javascript">
            $(function(){
            
                // Accordion
                $("#accordion").accordion({
                    header: "h3"
                });
                $("#milaccordion").accordion({
                    header: "h3"
                });
                
                
                
                // Tabs
                $('#tabs').tabs();
                $('#stattabs').tabs();
                
                //Buttons
                $('.buttonRes').button();
                $('.buttonResRem').button();
                $('.buttonMil').button();
                $('.buttonx').button();
                $('.buttonStat').button();
                $('.buttonclose').button();
                //Carousel
                
                $("#statsPopup").dialog({
                    buttons: {
                        "Close": function(){
                            $(this).dialog("close");
                        }
                    },
                    height: 550,
                    width: 700,
                    title: 'Scoreboard',
                    autoOpen: false
                });
                
                
                $('#tabs').bind('tabsshow', function(event, ui){
                    if (ui.panel.id == "tabsTerritory") {
                        // resizeMap();
                    }
                    else 
                        if (ui.panel.id == "tabsAllies") {
                            jQuery('#mycarousel').jcarousel({
                                vertical: true
                            
                            });
                        }
                    
                });
                
                $('#xstats').bind('click', function(event){
                    $('#statsPopup').dialog('open');
                    return false;
                    
                });
                
                $('.buttonRes').bind('click', function(event){
                    //FIXME: Make this 5 if shift is held down
                    var addNumber = 1;
                    addResource(event.currentTarget.id, addNumber);
                });
                
                $('.buttonResRem').bind('click', function(event){
                    var addNumber = 1;
                    remResource(event.currentTarget.id, addNumber);
                });
                
                $('.buttonMil').bind('click', function(event){
                    var addNumber = 1;
                    addMilResource(event.currentTarget.id, addNumber);
                });
                
            });
        </script>
        <style type="text/css">
            body {
                font: 75% "Trebuchet MS", sans-serif;
                margin: 0px;
            }
            
            .buttonRes, .buttonResRem, .buttonMil {
                width: 100px;
                padding: 4px 3px;
            }
            
            .buttonRes:focus {
                outline: none;
            }
            
            .buttonResRem:focus {
                outline: none;
            }
            
            .links {
                padding: 14px 10px;
                display: inherit;
                color: #000000;
                width: 144px;
                text-decoration: none;
                font-weight: bold;
                background: url(images/button.gif) no-repeat center center;
                text-align: center;
            }
            
            .minh {
                min-height: 500px;
                height: auto !important;
                height: 500px;
            }
            
            .minstat {
                min-height: 350px;
                height: auto !important;
                height: 3500px;
            }
            
            a:focus {
                outline: none;
            }
            
            .resStat {
                text-align: left;
                width: 244px;
                height: 31px;
                padding: 10px 40px 10px 40px;
                margin: 20px;
                font: bold 120% / 100% Arial, Helvetica, sans-serif;
                color: #000;
                border: solid 1px;
                text-decoration: none;
                background-color: #ddd;
            }
            
            .active {
                background-position: right 12px;
            }
            
            .jcarousel-skin-tango {
                width: 10%;
                float: left;
            }
            
            .allymap {
                width: 100%;
                min-height: 490px;
                height: auto !important;
                height: 490px;
            }
        </style>
    </head>
    <body>
        <p class="slide" align="center">
            <span class="buttonStat" id="xstats">Stat </span>
        </p>
        <div id="tabs">
            <ul>
                <li>
                    <a href="#tabsCivilian">Civilian</a>
                </li>
                <li>
                    <a href="#tabsMil">Military</a>
                </li>
                <li>
                    <a href="#tabsTerritory">Territory</a>
                </li>
                <li>
                    <a href="#tabsAllies">Allies</a>
                </li>
            </ul>
            <div id="tabsCivilian" class="minh">
                <div id="accordion" class="minh">
                    <div>
                        <h3><a href="#">Food</a></h3>
                        <div>
                            <img src="images/food.png">
                            </img><span class="resStat" id="resfood">0 Persons collecting food </span>
                            <span class="buttonRes" id="addfood">Add </span>
                            <span class="buttonResRem" id="remfood">Remove </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Water</a></h3>
                        <div>
                            <img src="images/water.jpeg">
                            </img><span class="resStat" id="reswater">0 Persons collecting water </span>
                            <span class="buttonRes" id="addwater">Add </span>
                            <span class="buttonResRem" id="remwater">Remove </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Hay</a></h3>
                        <div>
                            <img src="images/hay.jpeg">
                            </img><span class="resStat" id="reshay">0 Persons collecting hay </span>
                            <span class="buttonRes" id="addhay">Add </span>
                            <span class="buttonResRem" id="remhay">Remove </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Wood</a></h3>
                        <div>
                            <img src="images/wood.jpeg">
                            </img><span class="resStat" id="reswood">0 Persons collecting wood </span>
                            <span class="buttonRes" id="addwood">Add </span>
                            <span class="buttonResRem" id="remwood">Remove </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Silver</a></h3>
                        <div>
                            <img src="images/silver.jpeg">
                            </img><span class="resStat" id="ressilver">0 Persons collecting silver </span>
                            <span class="buttonRes" id="addsilver">Add </span>
                            <span class="buttonResRem" id="remsilver">Remove </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Gold</a></h3>
                        <div>
                            <img src="images/gold.jpeg">
                            </img><span class="resStat" id="resgold">0 Persons collecting gold </span>
                            <span class="buttonRes" id="addgold">Add </span>
                            <span class="buttonResRem" id="remgold">Remove </span>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <span class="resStat" id="resTotal">30 free persons </span>
            </div>
            <div id="tabsMil" class="minh">
                <div id="milaccordion">
                    <div>
                        <h3><a href="#">Army</a></h3>
                        <div>
                            <img src="images/army.png">
                            </img><span class="resStat" id="resArmy">0 Army </span>
                            <span class="buttonMil" id="createArmy">Create </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Tank</a></h3>
                        <div>
                            <img src="images/army.png">
                            </img><span class="resStat" id="resTank">0 Tanks </span>
                            <span class="buttonMil" id="createTank">Create </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Aircraft</a></h3>
                        <div>
                            <img src="images/army.png">
                            </img><span class="resStat" id="resAir">0 aircraft </span>
                            <span class="buttonMil" id="createAir">Create </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Navy</a></h3>
                        <div>
                            <img src="images/army.png">
                            </img><span class="resStat" id="resNavy">0 navy </span>
                            <span class="buttonMil" id="createNavy">Create </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Spies</a></h3>
                        <div>
                            <img src="images/army.png">
                            </img><span class="resStat" id="resSpies">0 Spies </span>
                            <span class="buttonMil" id="createSpies">Create </span>
                        </div>
                    </div>
                    <div>
                        <h3><a href="#">Submarines</a></h3>
                        <div>
                            <img src="images/army.png">
                            </img><span class="resStat" id="resSubs">0 submarines </span>
                            <span class="buttonMil" id="createSubs">Create </span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tabsTerritory" class="minh">
                <div id="territory" class="minh">
                </div>
            </div>
            <div id="tabsAllies" class="minh">
                <ul id="mycarousel" class="jcarousel-skin-tango">
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                    <li>
                        <img src="images/india.gif" width="75" height="75" alt="" />
                    </li>
                </ul>
                <div align="right" class="allymap">
                    This is an example div
                </div>
            </div>
        </div>
        <script language="javascript">
                        
						  var clickNo = 0;
                        var lats = new Array(4);
                        var points = new Array(6);
                        var OKSend = false;
                        var baseNum = 110;
                        var homeLat = 37.4419;
                        var homeLon = -122.1419;
                        var marker = null;
                        var map;
						               
                        //food,water,hay,wood,silver,gold
                        var resources = new Array(10);
                        
                        var mresources = new Array(10);
                        var totalRes = 100;
                        
						
                        
            			 function initMain(){
                        
                        
                            for (i = 0; i < 10; i++) {
                              	resources[i] = new Array(3);	
            				       }
            					
            	
                 resources[2][0]=4;
            	resources[2][0]=4000;
            	resources[2][0]=4;
            	 
                 resources[3][0]=3;
            	resources[3][0]=3000;
            	resources[3][0]=3;
            	 
                 resources[0][0]=6;
            	resources[0][0]=6000;
            	resources[0][0]=6;
            	 
                 resources[1][0]=5;
            	resources[1][0]=5000;
            	resources[1][0]=5;
            	 
                 resources[6][0]=0;
            	resources[6][0]=100;
            	resources[6][0]=0;
            	 
                 resources[4][0]=2;
            	resources[4][0]=2000;
            	resources[4][0]=2;
            	 
                 resources[5][0]=1;
            	resources[5][0]=1000;
            	resources[5][0]=1;
            	 
                      ;
            		
                  mresources[0]=600;
            	 
                  mresources[4]=100;
            	 
                  mresources[3]=100;
            	 
                  mresources[2]=500;
            	 
                  mresources[1]=400;
            	             
                      
                           totalRes = totalRes - (resources[0][0] + resources[1][0] + resources[2][0] + resources[3][0] + resources[4][0] + resources[5][0]);
                            syncResControls();
                            syncMilControls();
                        }
                        
            			
                        
                        function addResource(resource, addNumber){
                        
                            if (totalRes - addNumber < 0) {
                                //FIXME move this to dialog box
                                alert("No more free people left");
                                return;
                            }
                            totalRes = totalRes - addNumber;
                            
                            var resType = -1;
                            switch (resource) {
                                case "addfood":
                                    resType = 0;
                                    break;
                                case "addwater":
                                    resType = 1;
                                    break;
                                case "addhay":
                                    resType = 2;
                                    break;
                                case "addwood":
                                    resType = 3;
                                    break;
                                case "addsilver":
                                    resType = 4;
                                    break;
                                case "addgold":
                                    resType = 5;
                                    break;
                                default:
                                    resType = 6;
                                    return;            break;
                            }
                            
                            resources[resType][0] += addNumber;
                            syncServer(resType, resources[resType][0]);
                            syncResControls();
                            
                        }
                        
                        function syncResControls(){
                        
                            $('#resfood').html(resources[0][0] + " civilians");
                            $('#reswater').html(resources[1][0] + " civilians");
                            $('#reshay').html(resources[2][0] + " civilians");
                            $('#reswood').html(resources[3][0] + " civilians");
                            $('#ressilver').html(resources[4][0] + " civilians");
                            $('#resgold').html(resources[5][0] + " civilians");
                            $('#resTotal').html(totalRes + " free persons");
                        }
                        
                        function syncServer(resType, totalCivs){
                        
                            $.getJSON("resource/getperson", {
                                personid: 1
                                       }, function(availability){
            						   	alert(availability);
                                syncResControls();
                            });
                        }
                        
                        
                      
                        
                        function showMap(){
                        
                            //TODO block if more then 5000 points away
                            if (GBrowserIsCompatible()) {
                                map = new GMap2(document.getElementById("territory"));
                                map.setCenter(new GLatLng(homeLat, homeLon), 13);
                                map.addControl(new GSmallMapControl());
                                //TODO: get a list of markers from server and update them here
                                var homeMarker = new GMarker(new GLatLng(homeLat, homeLon), {
                                    draggable: false
                                });
                                map.addOverlay(homeMarker);
                                
                                GEvent.addListener(map, "click", function(overlay, latlng){
                                    if (null != marker) 
                                        return;
                                    var lat = latlng.lat();
                                    var lon = latlng.lng();
                                    //  alert("lat is" + lat + " long is "+ lon);
                                    var loc = new GLatLng(lat, lon);
                                    
                                    marker = new GMarker(loc, {
                                        draggable: true
                                    });
                                    
                                    // TODO remove this listener?
                                    GEvent.addListener(marker, "dragend", function(){
                                        var dragLoc = marker.getLatLng();
                                        var dlat = dragLoc.lat();
                                        var dlon = dragLoc.lng();
                                        var distance = calculateDistance(homeLat, dlat, homeLon, dlon);
                                        marker.openInfoWindowHtml("new home unit is " + distance + " points aways");
                                        app.pageDialog.gmaps.syncmapCosts(distance);
                                    });
                                    
                                    
                                    GEvent.addListener(marker, "dragstart", function(){
                                        map.closeInfoWindow();
                                    });
                                    
                                    
                                    map.addOverlay(marker);
                                    
                                    var distance = calculateDistance(homeLat, lat, homeLon, lon);
                                    marker.openInfoWindowHtml("new home unit is " + distance + "points aways");
                                    app.pageDialog.gmaps.syncmapCosts(distance);
                                    
                                });
                            }
                        }
                        
                        function calculateDistance(lat1, lat2, lon1, lon2){
                        
                            var R = 6370; // radius of the earth in km
                            var km = 1;
                            var d = Math.acos(Math.sin(lat1) * Math.sin(lat2) +
                            Math.cos(lat1) * Math.cos(lat2) *
                            Math.cos(lon2 - lon1)) *
                            R;
                            
                            var t1 = Math.sin(lat1) * Math.sin(lat2);
                            var t2 = Math.cos(lat1) * Math.cos(lat2);
                            var t3 = Math.cos(lon1 - lon2);
                            var t4 = t2 * t3;
                            var t5 = t1 + t4;
                            var rad_dist = Math.atan(-t5 / Math.sqrt(-t5 * t5 + 1)) + 2 * Math.atan(1);
                            
                            var dlat = lat2 - lat1;
                            var dlng = lon2 - lon1;
                            var a = Math.sin(dlat / 2) * Math.sin(dlat / 2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(dlng / 2) * Math.sin(dlng / 2);
                            var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                            km = R * c;
                            
                            return Math.ceil(km);
                        }
                        
                        function resizeMap(){
                            map.checkResize();
                        }
                        
                        function drawChart(){
                            //TODO: set the background color to gray to disable the top tiers
                            var data = new google.visualization.DataTable();
                            data.addColumn('string', 'Name');
                            data.addColumn('string', 'Manager');
                            data.addColumn('string', 'ToolTip');
                            data.addRows(5);
                            data.setCell(0, 0, 'President');
                            data.setCell(0, 2, 'The President');
                            data.setCell(1, 0, 'Vice Presient');
                            data.setCell(1, 1, 'President');
                            data.setCell(2, 0, 'Home Minister');
                            data.setCell(2, 1, 'President');
                            data.setCell(3, 0, 'Defence');
                            data.setCell(3, 1, 'Home Minister');
                            data.setCell(3, 2, 'Increase Defence Points');
                            data.setCell(4, 0, 'Army');
                            data.setCell(4, 1, 'Defence');
                            // Create and draw the visualization.
                            var goog = new google.visualization.OrgChart(document.getElementById('govt'));
                            goog.draw(data, {
                                allowHtml: true
                            });
                            
                            google.visualization.events.addListener(goog, 'select', selectHandler);
                            
                            function selectHandler(e){
                                //TODO selection is undefined if there is nothing selected.
                                selectedPos = (goog.getSelection()[0]).row;
                                checkNomination(selectedPos);
                                
                            }
                        }
                        
                        function checkNomination(selectedPos){
                            alert("checking nomination");
                            
                        }
                        
                        
                        
                        
                        function addMilResource(resource, addNumber){
                        
                        
                            switch (resource) {
                                case "createArmy":
                                    mresources[0] += addNumber;
                                    break;
                                case "createTank":
                                    mresources[1] += addNumber;
                                    break;
                                case "createAir":
                                    mresources[2] += addNumber;
                                    break;
                                case "createNavy":
                                    mresources[3] += addNumber;
                                    break;
                                case "createSpies":
                                    mresources[4] += addNumber;
                                    break;
                                case "createSubs":
                                    mresources[5] += addNumber;
                                    break;
                                    
                                default:
                                    alert("dont know " + resource);
                                    break;
                            }
                            syncMilControls();
                        }
                        
                        
                        function remResource(resource, addNumber){
                        
                        
                            switch (resource) {
                                case "remfood":
                                    resources[0][0] -= addNumber;
                                    break;
                                case "remwater":
                                    resources[1][0] -= addNumber;
                                    break;
                                case "remhay":
                                    resources[2][0] -= addNumber;
                                    break;
                                case "remwood":
                                    resources[3][0] -= addNumber;
                                    break;
                                case "remsilver":
                                    resources[4][0] -= addNumber;
                                    break;
                                case "remgold":
                                    resources[5][0] -= addNumber;
                                    break;
                                    
                                default:
                                    alert("dont know " + resource);
                                    break;
                            }
                            totalRes = totalRes + addNumber;
                            syncResControls();
                        }
                        
                        
                        //google.load('visualization', '1', {packages:['orgchart']});
                        
                        //showMap();
                        //drawChart();
                        
        
                       
                        
                        function syncMilControls(){
                        
                            $('#resArmy').html(mresources[0] + " Army");
                            $('#resTank').html(mresources[1] + " Tanks");
                            $('#resAir').html(mresources[2] + " Air");
                            $('#resNavy').html(mresources[3] + " Navy");
                            $('#resSpies').html(mresources[4] + " Spies");
                            $('#resSubs').html(mresources[5] + " Subs");
                            
                            
                        }
                        
                        initMain();
                    
        </script>
        <div id="statsPopup">
            <div id="stattabs">
                <ul>
                    <li>
                        <a href="#tabs-1">Individual Ranks</a>
                    </li>
                    <li>
                        <a href="#tabs-2">Country Ranking</a>
                    </li>
                    <li>
                        <a href="#tabs-3">Global Dominators</a>
                    </li>
                </ul>
                <div id="tabs-1" class="minstat">
                    indi
                </div>
                <div id="tabs-2" class="minstat">
                    country
                </div>
                <div id="tabs-3" class="minstat">
                    global
                </div>
            </div>
        </div>
    </body>
</html>
